
import BaseView from "./baseView.js";

export default class shouye extends BaseView {
    //添加css样式
    renderCss() {
        $("head").append('<link rel="stylesheet" type="text/css" href="css/dianyingxiangqing.css"><link rel="stylesheet" type="text/css" href="css/reset.css">')
    }
    render() {
        this.$el.html(`
        <!-- 头部 -->
        <header>
            <nav class="H-nav layout">
                <div class="layout H-left-div">
                    <a href="#/homepages">
                        <p class="log">
                            <span class="text">猫眼电影</span>
                            <span class="beijin"></span>
                            <span class="faguang"></span>
                        </p>
                    </a>
                    <div class="layout">
                    <span>成都
                    <ol>
                        <li class="layout">
                            <span>区:</span><a href="">武侯</a><a href="">郫都</a><a href="">双流</a><a href="">金牛</a>
                        </li>
                    </ol>
                </span>
                    </div>
                    <ul class="layout H-link">
                        <li class="layout">
                            <a href="#/homepages">首页</a>
                        </li>
                        <li class="layout">
                            <a href="#/movies">电影</a>
                        </li>
                        <li class="layout">
                            <a href="#/yingyuans">影院</a>
                        </li>
                        <li class="layout">
                            <a href="">榜单</a>
                        </li>
                        <li class="layout">
                            <a href="">热点</a>
                        </li>
                    </ul>
                </div>
                <div class="H-right-div layout">
                    <form action="">
                        <input type="text" placeholder="找影视剧、影人、影院">
                    </form>
                    <div class="register">
                        <div>
                            <div class="yuan">
                                <div class="you">
                                </div>
                                <div class="zhongjian">
                                    <p>
                                        <a href="#/logins">登录</a>
                                        <a href="#/dingdans">我的订单</a>
                                    </p>
                                </div>
                                <div class="zuo">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </header>
        <!-- 内容 -->
        <main>
            <article>
                <!-- 海报 -->
                <header class="poster">
                    <ul class="layout">
                        <li class="poster-left layout layout11">
                            
                        </li>
                        <li class="poster-right layout">
                            <div class="layout">
                                <div>
                                    <p>豆瓣评分</p>
                                    <p class="p1"></p>
                                    <span>(55.6万人评分)</span>
                                </div>
                                <div>
                                    <p>用户评分</p>
                                    <p class="p1"></p>
                                    <span>(55.6万人评分)</span>
                                </div>
                                <div>
                                    <p>网友评分</p>
                                    <p class="p1"></p>
                                    <span>(55.6万人评分)</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="aa">立即购票</a>
                        </li>
                    </ul>
                </header>
                <!-- 内容 -->
                <div class="referral layout">
                    <!-- 左边 -->
                    <article>
                        <header>
                            <nav>
                                <ul class="layout">
                                    <li><input type="radio" id="jie1" name="jie" checked>
                                    <label for="jie1"><a href="">介绍</a></label></li>
                                    <li><input type="radio" id="jie2" name="jie">
                                   <label for="jie2"> <a href="">演职人员</a></label></li>
                                    <li><input type="radio" id="jie3" name="jie">
                                    <label for="jie3"><a href="">奖项</a></label></li>
                                    <li><input type="radio" id="jie4" name="jie">
                                    <label for="jie4"><a href="">图集</a></label></li>
                                </ul>
                            </nav>
                        </header>
                        <section class="story">
                            <h1 id="jieshao">剧情简介</h1>
                            <p class="p2"></p>
                        </section>
                        <section class="personnel" id="yanyuan">
                            <div class="layout">
                                <h1 id="yanyuan">演职人员</h1><a href="">全部</a>
                            </div>
                            <ul class="layout">
                                <li>
                                    <p>导演</p>
                                    <img src="./img/59ba47e330353808302ffb6d0cd9355c29618.jpg" alt="">
                                    <p>林超贤</p>
                                </li>
                                <li>
                                    <p>演员</p>
                                    <img src="./img/1yanyuan.jpg" alt="">
                                    <p>高山南</p>
                                    <p>饰：江户川柯南</p>
                                </li>
                                <li>
                                    <img src="./img/2yanyuan.jpg" alt="">
                                    <p>山崎和佳奈</p>
                                    <p>饰：毛利兰</p>
                                </li>
                                <li>
                                    <img src="./img/3yanyuan.jpg" alt="">
                                    <p>小山力也</p>
                                    <p>饰：毛利小五郎</p>
                                </li>
                                <li>
                                    <img src="./img/4yanyuan.jpg" alt="">
                                    <p>池田秀一</p>
                                    <p>饰：赤井秀一</p>
                                </li>
                            </ul>
                        </section>
                        <!-- 图集 atlas  -->
                        <section class="atlas">
                            <div class="layout">
                                <h1 id="tujione">图集</h1><a href="">全部</a>
                            </div>
                            <ul class="layout">
                                <li><img src="./img/1yingji.jpg" alt="">
                                </li>
                                <li>
                                    <ol class="layout">
                                        <li><img src="./img/2yingji.jpg" alt=""></li>
                                        <li><img src="./img/4yingji.jpg" alt=""></li>
                                        <li><img src="./img/3yingji.jpg" alt=""></li>
                                        <li><img src="./img/5yingji.jpg" alt=""></li>
                                    </ol>
                                </li>
                            </ul>
                        </section>
                        <input type="checkbox" id="discuss">
                        <section class="discuss">
                            <div class="layout">
                                <h1>热门短评</h1>
                                <!-- <input type="button" value="写短评"> -->
                                <label for="xiepinglun">写短评</label>
                            </div>
                            <ul class="layout">
                                <li>
                                    <img src="./img/1touxiang.jp.jpg" alt="">
                                    <span></span>
                                </li>
                                <li>
                                    <ol class="layout">
                                        <li>
                                            <p>上官明超</p>
                                            <span>今天<i class="xing5"></i></span>
                                        </li>
                                        <li>
                                            <span class="heat">12058</span>
                                        </li>
                                    </ol>
                                    <p>
                                        来了来了，真的来了，下周六电影院不见不散！
                                    </p>
                                </li>
                            </ul>
                            <ul class="layout">
                                <li><img src="./img/2touxiang.jp.jpg" alt=""><i></i></li>
                                <li>
                                    <ol class="layout">
                                        <li>
                                            <p>汛</p>
                                            <span>2天前<i class="xing4"></i></span>
                                        </li>
                                        <li>
                                            <span class="heat">12058</span>
                                        </li>
                                    </ol>
                                    <p>
                                        希望买到票的柯学家们去的时候都注意安全！能跟喜欢的人一起去看！准备看电影表白的也一定成功！祝我们都有一个好的观影！新一等我！
                                    </p>
                                </li>
                            </ul>
                            <ul class="layout">
                                <li><img src="./img/3touxiang.jp.jpg" alt=""></li>
                                <li>
                                    <ol class="layout">
                                        <li>
                                            <p>Joker的意思好像是傻瓜</p>
                                            <span>5天前<i class="xing5"></i></span>
                                        </li>
                                        <li>
                                            <span class="heat">12058</span>
                                        </li>
                                    </ol>
                                    <p>
                                        是日语吗 我买了票 就怕是国语
                                    </p>
                                </li>
                            </ul>
                            <ul class="layout">
                                <li><img src="./img/4touxiang.jp.jpg" alt=""><span></span></li>
                                <li>
                                    <ol class="layout">
                                        <li>
                                            <p>樛木</p>
                                            <span>2020-01-10<i class="xing4"></i></span>
                                        </li>
                                        <li>
                                            <span class="heat">12058</span>
                                        </li>
                                    </ol>
                                    <p>快快快，上映吧！我已经准备好了票票
                                    </p>
                                </li>
                            </ul>
                            <ul class="layout">
                                <li><img src="./img/5touxiang.jp.jpg" alt=""><i></i></li>
                                <li>
                                    <ol class="layout">
                                        <li>
                                            <p>妮妮WJK.</p>
                                            <span>2019-12-10<i class="xing3"></i></span>
                                        </li>
                                        <li>
                                            <span class="heat">12058</span>
                                        </li>
                                    </ol>
                                    <p>真的 看到消息我瞬间发了朋友圈安利全部名柯姐妹 第一次真正意义上的红黑交锋 鹿死谁手没个定数 看了预告好像是日本警察终于发现乌鸦了啊 哈哈哈哈哈哈哈哈哈 期待啊 感觉这部碾压上部（勿喷）
                                    </p>
                                </li>
                            </ul>
                            <ul class="layout">
                                <li><img src="./img/6touxiang.jp.jpg" alt=""></li>
                                <li>
                                    <ol class="layout">
                                        <li>
                                            <p>兔叽不见了.</p>
                                            <span>2020-03-05<i class="xing5"></i></span>
                                        </li>
                                        <li>
                                            <span class="heat">12058</span>
                                        </li>
                                    </ol>
                                    <p>快点上映啵！想和女朋友去看啊！！迫不及待了
                                    </p>
                                </li>
                            </ul>
                            <ul class="layout">
                                <li><img src="./img/1touxiang.jp.jpg" alt=""><span></span></li>
                                <li>
                                    <ol class="layout">
                                        <li>
                                            <p>欲望发生了病变</p>
                                            <span>2020-04-14<i class="xing5"></i></span>
                                        </li>
                                        <li>
                                            <span class="heat">12058</span>
                                        </li>
                                    </ol>
                                    <p>我想知道国内到底上不上映啊。
                                    </p>
                                </li>
                            </ul>
                        </section>
                        <p><label for="discuss">查看更多回复</label></p>
                        <!-- 提交文本框 -->
                        <input type="checkbox" class="guanbi" id="guan">
                        <input type="checkbox" id="xiepinglun">
                        <div class="bianji"><textarea name="" id="" cols="80" rows="10"></textarea>
                        <label for="guan">提交</label></div>
                    </article>
                    <!-- 右边 -->
                    <aside>
                        <div>
                            <h1>相关资讯</h1>
                            <ul>
                                <li class="layout">
                                    <img src="./img/dianyingxiangqing_03.png" alt="">
                                    <div class="layout">
                                        <p>《名侦探柯南》上映20天票房突破10亿大关</p>
                                        <p>猫眼电影<span>21145</span><span>111</span></p>
                                    </div>
                                </li>
                                <li class="layout">
                                    <img src="./img/biao.jpg" alt="">
                                    <div class="layout">
                                        <p>《名侦探柯南》上映20天票房突破10亿大关</p>
                                        <p>猫眼电影<span>21145</span><span>111</span></p>
                                    </div>
                                </li>
                                <li class="layout">
                                    <img src="./img/oneweek.jpg" alt="">
                                    <div class="layout">
                                        <p>《名侦探柯南》上映20天票房突破10亿大关</p>
                                        <p>猫眼电影<span>21145</span><span>111</span></p>
                                    </div>
                                </li>
                            </ul>
                            <h1>相关电影</h1>
                            <ul class="layout ul1">
                                
                            </ul>
                        </div>
                    </aside>
                </div>
            </article>
        </main>
        <!-- 底部 -->
        <footer>
            <nav>
                <ul class="layout">
                    <li>
                        <a href="#/homepages">关于我们</a>
                    </li>
                    <li>
                        <a href="#/homepages">管理团队</a>
                    </li>
                    <li>
                        <a href="#/homepages">投资者关系</a>
                    </li>
                    <li>
                        <a href="#/homepages">美团网</a>
                    </li>
                    <li>
                        <a href="#/homepages">格瓦拉</a>
                    </li>
                    <li>
                        <a href="#/homepages">美团下载</a>
                    </li>
                </ul>
            </nav>
            <p>商务合作邮箱：v@maoyan.com客服电话：10105335违法和不良信息举报电话：4006018900</p>
            <p>北京猫眼文化传媒有限公司</p>
        </footer>
        
        
        `)
    }
    handle() {
        let movieid = window.location.href.substring(window.location.href.length - 24)
        $.ajax({
            type: "post",
            url: "/api/platoon/getamovie",
            data: {
                movieid: movieid
            },
            dataType: "json",
            success(data) {
                console.log(data)
                let str = `
                <img src="http://127.0.0.1:4000/photos/${data[0].images[0]}" alt="名侦探柯南" style="height: 333px;width: 242px">
                <div>
                    <h1>${data[0].cname}</h1>
                    <p>${data[0].ename}</p>
                    <p>${ [0].type}</p>
                    <p>${data[0].area}</p>
                    <span>${data[0].upDate}</span>
                    <div class="layout">
                        <input type="button" value="想看">
                        <inp ut type="button" value="评分">
                    </div>
                </div>
                `
                $(".layout11").html(str)
                $(".p1").text(`${data[0].score}`)
                $(".p2").text(`${data[0].intro}`)
            }
        })
        //渲染相关电影
        $.ajax({
            type: "post",
            url: "/api/platoon/getallmovie",
            dataType: "json",
            success(data) {
                data = data.slice(2)
                let str = "";
                data.forEach((item) => {
                    str += `
                    <li data-movieid=${item._id}>
                    <img src="http://127.0.0.1:4000/photos/${item.images[0]}" alt="">
                    <p>${item.cname}</p>
                    <i>${item.score}</i>
                    </li>
                    `
                });
                $(".ul1").html(str)
            }
        })
        $(".ul1").on("click", "li", function () {
            window.location.hash = `#/moviederails?${this.dataset.movieid}`
        })
        $(".aa").on("click",function(){
            window.location.hash = `#/yingyuan?movieid=${movieid}`
        })
    }
}
